<template>
  <div class="groupManage">
    <van-nav-bar
      left-text="分组管理"
      left-arrow
      @click-left="onClickLeft"
      fixed
      border
    >
      <template #right>
        <van-icon name="plus" /> <span @click="addGroup()">新建分组</span>
      </template>
    </van-nav-bar>
    <!-- 数组 -->
    <div class="list"  id="list_item">
      <!-- 每一项 -->

      <div
        class="list_item"
     
        v-for="(item, index) in bingList"
        :key="index"
      >
        <div class="remove">
          <van-icon
          @click="removeFn()"
            class="remove_icon"
            name="delete-o"
            size="30"
            color="#eb5757"
          />
        </div>
        <div class="name">
          <div>{{ item.name }}</div>
          <div>包含{{ item.num }}人</div>
        </div>
        <div class="sort">
          <van-icon name="wap-nav" size="30" color="#a0a6b1" />
        </div>
      </div>
    </div>

    <!-- 遮罩层 -->
    <van-overlay :show="ddd" @click="closeMask()" lock-scroll />
    <!-- 移除对话框 -->
    <div v-if="Dshow" class="removeDialog">
      <div class="Dtitle">
        <h2 v-if="this.flag == 1">新建分组</h2>
        <h2 v-if="this.flag == 2">确认要删除该分组吗？</h2>
      </div>
      <div class="text">
         <van-field v-if="this.flag == 1" v-model="groupName" class="groupNameInp"  size='large' input-align="center" placeholder="请填写分组名" />
         <div v-if="this.flag == 2">删除分组后，其包含的患者将被放置到“未分组列表中”，确认要删除吗？</div>
      </div>
      <div class="btn">
        <van-button type="default" class="cancle" @click="cancle"
          >取消</van-button
        >
        <van-button type="default" v-if="this.flag == 1"
          >确定</van-button
        >
          <van-button type="default" v-if="this.flag ==2"  class="removeBtn"
          >删除</van-button
        >
      </div>
    </div>



  </div>
</template>

<script>
// import vuedraggable from "vuedraggable";
import Sortable from "sortablejs";
export default {
  // components: { vuedraggable },
  data() {
    return {
      flag:0,
      groupName:'',
      ddd:false,
      Dshow:false,
      bingList: [
        {
          id: "1",
          name: "社恐组",
          num: "20",
        },
        {
          id: "2",
          name: "神经病组",
          num: "20",
        },
        {
          id: "3",
          name: "社交牛逼症组",
          num: "20",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //新建分组
    addGroup(){
      this.flag = 1
      this.ddd = true
      this.Dshow = true

    },
    closeMask(){
      this.ddd = false
      this.Dshow = false
    },
    //取消按钮
    cancle(){
      this.closeMask()
      this.groupName = ''
    }
    ,
    //删除
    removeFn(){
      this.flag  = 2
      this.ddd = true
      this.Dshow = true

   }
  },
  created() {

  },
  mounted() {
  
   var el = document.getElementById("list_item");
    new Sortable(el, {
      handle: ".sort", // handle's class
      animation: 150,
      onEnd:(evt)=>{
       //拖拽动作结束后执行
        this.bingList.splice(evt.newIndex, 0, this.bingList.splice(evt.oldIndex, 1)[0])
        var newArray = this.bingList.slice(0)
        this.bingList = []
        this.$nextTick(function () {
            this.bingList = newArray
            console.log(this.bingList);
          })
      }
    });

   
  },
};
</script>
<style lang='less' scoped>

.removeDialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  // transform: translateY(-50%) !important;
  border-radius: 0.133333rem /* 5/37.5 */;
  // height: 8rem /* 300/37.5 */;
  width: 8.8rem /* 330/37.5 */;
  background-color: white;
  z-index: 999;

  .groupNameInp{
    border-bottom: 1px solid rgb(236, 236, 236);
  }
  .Dtitle {
    // height: 1.066667rem /* 40/37.5 */;m\
    // margin-bottom: 0px !important;
    line-height: 1.066667rem /* 40/37.5 */;
    h2 {
    margin-bottom: 0px !important;
      
    }
}
  .text {
    // line-height: 2.133333rem /* 80/37.5 */;
    display: flex;
    align-items: center;
    height: 2.133333rem /* 80/37.5 */;
    font-size: 0.426667rem /* 16/37.5 */;
    padding: 0rem 0.5rem 0.5rem 0.5rem;
    color: rgb(87, 87, 87);
    margin-bottom: 1.6rem /* 60/37.5 */;
  }
  .btn {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    .cancle {
      color: rgb(139, 139, 139);
      border-right: none;
    }
    .van-button--normal {
      border-radius: 0;
      width: 50%;
      height: 1.6rem /* 60/37.5 */;
      font-size: 0.426667rem /* 16/37.5 */;
      font-weight: 700;
    }
  }
  .removeBtn {
    color: red;
  }
}

.groupManage {
  background-color: rgb(202, 202, 202);
  height: 100vh;
}
/deep/ .van-nav-bar__content {
  margin-top: 0.666667rem /* 25/37.5 */;
}

/deep/ .van-nav-bar__text {
  color: #000 !important;
  font-size: 0.426667rem /* 16/37.5 */;
}
/deep/ .van-nav-bar .van-icon {
  color: #000 !important;
}
.list {
  overflow: hidden;
  position: relative;
  margin-top: 1.866667rem /* 70/37.5 */;
  .yingzi {
    position: absolute;
    background-color: rgb(211, 210, 210);
    width: 100%;
    height: 1.6rem /* 60/37.5 */;
  }
  .list_item {
    background-color: white;
    height: 1.6rem /* 60/37.5 */;
    display: flex;
    align-items: center;
    .remove {
      margin-left: 0.266667rem /* 10/37.5 */;
      width: 1.6rem /* 60/37.5 */;
    }
    .name {
      height: 1.6rem /* 60/37.5 */;
      width: 70%;
      text-align: left;
      div:first-child {
        font-size: 0.426667rem /* 16/37.5 */;
        font-weight: 700;
        margin-top: 0.266667rem /* 10/37.5 */;
      }
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}
.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}
</style>